<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="demo1.css" type="text/css">
</head>
<body>
    <div id="con">
    <div>
        <span>宽度：</span>
        <input type="text" id="width">
        <span class="xing">*</span>
    </div>
    <div>
        <span>高度：</span>
        <input type="text" id="height">
        <span class="xing">*</span>
    </div>
    <div id="cal">
        <input type="button" id="calculate" value="计算">
    </div>
    <div>
        <span>周长：</span>
        <input type="text" id="perimeter">
    </div>
    <div>
        <span>面积：</span>
        <input type="text" id="area">
    </div>
    </div>
</body>
<script>
    var width = document.getElementById("width");
    var height = document.getElementById("height");
    var calcu = document.getElementById("calculate");
    var perimeter = document.getElementById("perimeter");
    var area = document.getElementById("area");
    calcu.onclick = function(){
        var w = parseInt(width.value);
        var h = parseInt(height.value);
        if(w && h){
            perimeter.value = (w+h)*2;
            area.value = w*h;
        }else{
            console.log(w)
        }
    }
</script>
</html>